<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
  <head>
    <title>dom操作_属性操作_通用属性操作</title>
    <meta http-equiv="content-type" content="text/html; charset=UTF-8">
	<script  src="../js/jquery-3.3.1.min.js"></script>
	<style type="text/css">
		 	div,span{
			    width: 140px;
			    height: 140px;
			    margin: 20px;
			    background: #9999CC;
			    border: #000 1px solid;
				float:left;
			    font-size: 17px;
			    font-family:Roman;
			}
			
			div.mini{
			    width: 30px;
			    height: 30px;
			    background: #CC66FF;
			    border: #000 1px solid;
			    font-size: 12px;
			    font-family:Roman;
			}
			
			div.visible{
				display:none;
			}
	 </style>
	<script type="text/javascript">
		//获取元素后，对元素进行属性操作，先学习通用属性操作
		//包括获取、设置、删除元素的属性(值)
		/*attr()和prop()方法区别:
		*   1.如果操作的是元素的固有属性，则建议使用prop
		*   2.如果操作的是元素的自定义属性，则建议使用attr
		* removeAttr()和removeProp()方法区别:同上
		*/
		$(function () {
            //获取北京节点的name属性值
			var name = $("#bj").attr("name");
			//alert(name);
            //设置北京节点的name属性的值为dabeijing
            $("#bj").attr("name","dabeijing");
            //新增北京节点的discription属性 属性值是didu
            $("#bj").attr("discription","didu");
            //删除北京节点的name属性并检验name属性是否存在
            $("#bj").removeAttr("name");
            //获得hobby的选中状态
			var checked = $("#hobby").prop("checked");
			alert(checked);
            //获取不到，弹出undefined，因为checked属性是固有属性，
			//只能使用prop获取，不能使用attr获取
            //var checked = $("#hobby").attr("checked");
        });
	</script>
	</head>
	<body>
		 <ul>
		 	 <li id="bj" name="beijing" xxx="yyy">北京</li>
			 <li id="tj" name="tianjin">天津</li>
			 <input type="checkbox" id="hobby" />
		 </ul>


	</body>
</html>



